<template>
	<view class="content" :style="{background: get_back()}">

		<view class="topBj" :style="{background: get_top()}"></view>

		<view class="middle" v-if="list.length > 0">
			<view class="" v-for="(item, idx) in list" @click="show(item.init_id,item.title, item.content, item.video_url)">
				<view class="back" :style="{background: get_kuangBack()}">
					<view class="image">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="frame"></view>
					<view class="text">
						<view class="">作者: {{item.author}}</view>
						<view class="">单位: {{item.lessee_name}}</view>
						<view class="">作品: {{item.title}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="zwsj" v-else>
			<image src="@/static/activity/healthHome/jqqd.png" alt="" />
			</image>
			<view>暂无数据</view>
		</view>

		<!-- 弹窗 -->
		<view class="fwb" v-if="is_show == true">
			<view class="cha" @click="close">
				<image src="@/static/home/cha.png" mode=""></image>
			</view>
			<u-parse :content="richText" :imageProp='imageProp' />
			<!-- <u-parse class="rich_text" :content="richText" :imageProp='imageProp' @preview="preview"
				@navigate="navigate" className="html_content" /> -->
		</view>

		<!-- 遮盖层 -->
		<!-- <gui-popup ref="guipage"> -->
		<view class="zhegai" v-if="is_show == true"></view>
		<!-- </gui-popup> -->

	</view>
</template>
<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				id: '',
				name: '',
				location: 'https://oss.boyaltd.cn',
				list: [],
				richText: '',
				imageProp: {
					mode: 'widthFix',
					padding: 0,
					lazyLoad: false,
					window: '100%'
				},
				is_show: false,
			}
		},
		onLoad(opt) {
			let self = this;
			self.id = opt.id
			self.name = opt.name
			uni.showLoading({
				title: '请稍候...'
			});
			self.get_list();
		},
		methods: {
			sort_asc(data) {
				this.list = data.sort((a, b) => a.sort - b.sort)
				this.list.push()
			},
			get_back() {
				let self = this
				if (self.name == '美术') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/meishubj.png) 100% 100% / 100% 100%';
				} else if (self.name == '书法') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/shufabj.png) 100% 100% / 100% 100%';
				} else if (self.name == '摄影') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/sheyingbj.png) 100% 100% / 100% 100%';
				} else if (self.name == '手工艺') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/sgybj.png) 100% 100% / 100% 100%';
				} else if (self.name == '工间操') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/gjcbj.png) 100% 100% / 100% 100%';
				}
			},
			get_top() {
				let self = this
				if (self.name == '美术') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/meishutop.png) 100% 100% / 100% 100%';
				} else if (self.name == '书法') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/shufatop.png) 100% 100% / 100% 100%';
				} else if (self.name == '摄影') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/sheyingtop.png) 100% 100% / 100% 100%';
				} else if (self.name == '手工艺') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/sgytop.png) 100% 100% / 100% 100%';
				} else if (self.name == '工间操') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/gjctop.png) 100% 100% / 100% 100%';
				}
			},
			get_kuangBack() {
				let self = this
				if (self.name == '美术') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/meishulan.png) 100% 100% / 100% 100%';
				} else if (self.name == '书法') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/shufalv.png) 100% 100% / 100% 100%';
				} else if (self.name == '摄影') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/sheyingzi.png) 100% 100% / 100% 100%';
				} else if (self.name == '手工艺') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/sgyfen.png) 100% 100% / 100% 100%';
				} else if (self.name == '工间操') {
					return 'url(https://oss.boyaltd.cn/new_app/activity/nationalDay/gjchuang.png) 100% 100% / 100% 100%';
				}
			},
			get_list() {
				var self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 23,
					}
				}, function(res) {
					let data = res.data.data
					console.log('data: ', data);
					uni.hideLoading();
					for (var i = 0; i < data.length; i++) {
						if (data[i].id == self.id) {
							let init_index = data[i].init_index
							for (var j = 0; j < init_index.length; j++) {
								if (init_index[j].imgs) {
									let img = init_index[j].imgs.substring(2, init_index[j].imgs.length - 2);
									// console.log('img：', img);
									init_index[j].imgs = img
								}
								// console.log('init_index: ', init_index[j]);
								self.list.push(init_index[j])
							}
						}
					}
					self.sort_asc(self.list)
					console.log('list: ', self.list);
				}, false)
			},
			close: function() {
				this.is_show = false
			},
			show(init_id, title, content, videoUrl) {
				let self = this
				if (init_id != 211) {
					self.richText = content
					self.is_show = true
				} else {
					uni.navigateTo({
						url: '/pages/activities/nationalDay/video_details?title=' + title + '&videoUrl=' + videoUrl
					})
				}
			},
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			}
		},
	}
</script>

<style>
	@import url("@/components/u-parse/u-parse.css");

	.content {
		width: 100vw;
		min-height: 100vh;
	}

	.topBj {
		width: 100vw;
		height: 298rpx;
	}

	.middle {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		max-height: 1150rpx;
		overflow: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.back {
		width: 320rpx;
		border-radius: 12rpx;
		margin: 20rpx 0;
	}

	.image {
		width: 280rpx;
		height: 180rpx;
		margin: 0 auto;
		padding: 18rpx 0;
	}

	.image>image {
		width: 100%;
		height: 100%;
	}

	.frame {
		width: 300rpx;
		height: 2rpx;
		margin: 0 auto;
		background: linear-gradient(to right, #18429F, #000);
	}

	.text {
		padding: 5rpx 20rpx;
		font-size: 25rpx;
		color: #1841A0;
	}

	.text>view {
		margin: 5rpx 0;
		width: 100%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.zwsj {
		width: 60%;
		margin: 0 auto;
		margin-top: 200rpx;
	}

	.zwsj>image {
		width: 100%;
		height: 420rpx;
	}

	.zwsj>view {
		font-size: 35rpx;
		text-align: center;
		margin-top: 10rpx;
		color: gray;
	}

	.fwb {
		position: absolute;
		z-index: 98;
		top: 18%;
		width: 100vw;
		height: 30%;
		/* background-color: rgba(0, 0, 0, 0.5); */
	}

	.cha {
		position: absolute;
		z-index: 99;
		top: -100rpx;
		right: 30rpx;
		width: 70rpx;
		height: 70rpx;
	}

	.cha>image {
		width: 100%;
		height: 100%;
	}

	.rich_text {
		margin-top: 150rpx;
		width: 100%;
		height: 100%;
	}

	.zhegai {
		position: absolute;
		z-index: 95;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>